<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>账户充值</span>
      </div>
      <el-form :model="payForm" :rules="rules" ref="payForm" label-width="100px">
        <el-form-item label="充值金额" prop="totalAmount">
          <el-radio-group v-model="payForm.totalAmount">
            <el-radio-button :label="50">50元</el-radio-button>
            <el-radio-button :label="100">100元</el-radio-button>
            <el-radio-button :label="200">200元</el-radio-button>
            <el-radio-button :label="500">500元</el-radio-button>
            <el-radio-button :label="1000">1000元</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自定义金额">
          <el-input-number 
            v-model="customAmount" 
            :min="1" 
            :max="10000" 
            :step="10"
            controls-position="right"
            @change="handleCustomAmountChange">
          </el-input-number>
          <span class="amount-unit">元</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitPay" :loading="loading">立即充值</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { tradePagePay } from "@/api/pay/pay";
import store from "@/store";

export default {
  name: "Pay",
  data() {
    return {
      // 支付表单
      payForm: {
        totalAmount: 100
      },
      // 自定义金额
      customAmount: 0,
      // 表单校验规则
      rules: {
        totalAmount: [
          { required: true, message: '请选择充值金额', trigger: 'change' }
        ]
      },
      loading: false
    };
  },
  computed: {
    userId() {
      return store.getters.userId;
    }
  },
  methods: {
    /** 处理自定义金额变化 */
    handleCustomAmountChange(value) {
      if (value > 0) {
        this.payForm.totalAmount = value;
      }
    },
    /** 提交支付 */
    submitPay() {
      this.$refs.payForm.validate(valid => {
        if (valid) {
          if (!this.userId) {
            this.$message.warning('请先登录');
            return;
          }
          
          this.loading = true;
          const payData = {
            userId: this.userId,
            totalAmount: this.payForm.totalAmount
          };
          
          tradePagePay(payData).then(response => {
            this.loading = false;
            if (response.code === 200) {
              // 处理支付成功
              this.$message.success('充值成功');
              // 可以在这里添加跳转到支付结果页面的逻辑
            } else {
              this.$message.error(response.msg || '充值失败');
            }
          }).catch(error => {
            this.loading = false;
            console.error('充值失败:', error);
            this.$message.error('充值失败，请稍后重试');
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.amount-unit {
  margin-left: 10px;
  color: #606266;
}
.el-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.el-radio-button {
  margin-bottom: 10px;
}
</style>
